<template>
    <div>
        <div class="e-form">
            <BillTop @cancel="handleClose"></BillTop>
            <div class="tabs" style="margin-bottom:120px">
                <div class="tabs-title">基本信息</div>
                <div style="width: 100%" class="form">
                    <el-form
                        :model="formData"
                        :label-width="formLabelWidth"
                        :rules="rulesBase"
                        ref="rulesBase"
                        class="demo-ruleForm"
                    >
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="合同编号：">
                                    <span>{{
                                        formData.contractNumber
                                    }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="所属机构：">
                                    <span>{{ formData.orgName }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item
                                    label="合同名称："
                                    prop="contractName"
                                >
                                    <el-input
                                        v-model="formData.contractName"
                                        autocomplete="off"
                                    ></el-input>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="币种：" prop="currencyId">
                                    <el-select v-model="formData.currencyId" @change="handleCurrency" placeholder="请选择"
                                    >
                                        <el-option
                                            v-for="(
                                                item
                                            ) in currencyForm"
                                            :key="item.value"
                                            :label="item.label"
                                            :value="item.value"
                                        >
                                        </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="不含税金额(元)：">
                                    <span>{{
                                        formData.taxExcludedAmount
                                    }}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="合同金额(元)：">
                                    <span>{{
                                        formData.contractAmount
                                    }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="签约人：" prop="signingName">
                                    <el-input v-model="formData.signingName" autocomplete="off" readonly>
                                        <i
                                            class="
                                                el-icon-document-copy
                                            "
                                            slot="suffix"
                                            @click="getSigningName"
                                        >
                                        </i>
                                    </el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="签订地点：" prop="address">
                                     <SelectAddr v-model="formData.address"
                                        lazy
                                        showCountry
                                    ></SelectAddr>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="合同有效期：" prop="signingStartTime">
                                   <el-date-picker type="date" placeholder="选择开始日期" value-format="yyyy-MM-dd" v-model="formData.signingStartTime" :clearable="false" style="width: 47%;"></el-date-picker>
                                    <div class="separ el-icon-minus"></div>
                                    <el-date-picker type="date" placeholder="选择结束日期" value-format="yyyy-MM-dd" v-model="formData.signingEndTime"  :clearable="false" style="width: 47%;"></el-date-picker>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="签订日期：" prop="signingDate">
                                    <el-date-picker type="date" value-format="yyyy-MM-dd" placeholder="选择签订日期" v-model="formData.signingDate"></el-date-picker>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="24">
                                <el-form-item label="备注：">
                                    <el-input type="textarea" v-model="formData.contractContext" autocomplete="off"></el-input>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="传输财务共享：" v-if="formData.contractState >= 4">
                                    <span class="redFont" v-if="formData.financialSharing === 0 || formData.financialSharing === 1 || formData.financialSharing === 2 || formData.financialSharing === 4">{{ financialSharingList[formData.financialSharing] }}</span>
                                    <span class="greenFont" v-if="formData.financialSharing === 3 || formData.financialSharing === 5">{{ financialSharingList[formData.financialSharing] }}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="录入日期：">
                                    <span>{{formData.gmtCreate}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                        <el-row>
                            <el-col :span="12">
                                <el-form-item label="经办人：">
                                    <span>{{userInfo.userName}}</span>
                                </el-form-item>
                            </el-col>
                            <el-col :span="12">
                                <el-form-item label="本位币：">
                                    <span>{{formData.baseCurName}}</span>
                                </el-form-item>
                            </el-col>
                        </el-row>
                    </el-form>
                </div>
            </div>
            <div class="buttons">
                <el-button type="primary" size="small" style="background: #2e61d7" @click="addSave"
                    >保存</el-button
                >
                <el-button size="small" @click="handleClose">取消</el-button>
            </div>
        </div>
    </div>
</template>

<script>
import { mapState, mapMutations  } from 'vuex'
import equipmentWasteSigning from '@/api/balanceContractApi/equipmentWasteApi/equipmentWasteSigning.js'
import equipmentWasteApply from '@/api/balanceContractApi/equipmentWasteApi/equipmentWasteApply.js'
import SelectAddr from '@/components/common/addrComp'
import { formatDate } from '@/utils/common.js'
import { baseCurRate } from '@/utils/rules.js'
import {  selectDataClient, showLoading, hideLoading } from '@/utils/common'
import { handleCurrency } from '@/pages/subcontract/common/contractCom.js'
export default {
    data () {
        return {
            //基础信息
            formData: {
                'address': '',
                'baseCurId': '',
                'baseCurName': '',
                'baseCurRate': 0,
                'billId': '',
                'contractAmount': 0,
                'contractChangeAmount': 0,
                'contractContext': '',
                'contractName': '',
                'contractNumber': '',
                'currencyId': '0',
                'currencyName': '',
                'originalBillId': '',
                'rmbName': '',
                'rmbRate': 0,
                'signingDate': '',
                'signingEndTime': '',
                'signingId': '',
                'signingName': '',
                'signingStartTime': '',
                'taxAmount': 0,
                'taxExcludedAmount': 0,
                'taxRate': 0
            },
            formLabelWidth: '200px',
            ctAddressCode: [],
            billid: this.$route.query.billid,
            rulesBase: {
                contractName: [
                    { required: true, message: '请输入合同名称', trigger: 'blur' },
                ],
                taxAmount: [
                    { required: true, message: '请输入税额', trigger: 'blur' },
                ],
                taxRate: [
                    { required: true, message: '请输入0-100的数字', trigger: 'blur' },
                ],
                contractContext: [
                    {
                        required: true,
                        message: '请输入备注',
                        trigger: 'blur'
                    },
                    {
                        min: 1,
                        max: 500,
                        message: '最多输入500字',
                        trigger: 'blur'
                    }
                ],
                signingDate: [
                    { required: true, message: '请选择签订日期', trigger: 'change' },
                    { validator: (rule, value, callback)=>{
                        const singTime = new Date(this.formData.signingDate).getTime() //签订时间
                        const startTime = new Date(formatDate(new Date(), 'yyyy-MM-dd')).getTime() //当前时间
                        if(singTime > startTime) {
                            callback(new Error('签订日期不能大于当前日期'))
                        }else{
                            callback()
                        }

                    }, trigger: 'change' }
                ],
                signingName: [
                    { required: true, message: '请选择签约人', trigger: 'blur' },
                ],
                address: [{ required: true, message: '请选择签订地点', trigger: 'blur' }],
                signingStartTime: [
                    { required: true, message: '请选择日期', trigger: ['change', 'blur'] },
                    { validator: (rule, value, callback)=>{
                        const singTime = new Date(this.formData.signingDate).getTime() //签订时间
                        const startTime = new Date(this.formData.signingStartTime).getTime()  //开始时间
                        const endTime = new Date(this.formData.signingEndTime).getTime() //结束时间
                        console.log(startTime === endTime)
                        if(!this.formData.signingStartTime || !this.formData.signingEndTime) {
                            callback(new Error('请选择日期'))
                        }
                        if(startTime >= endTime) {
                            callback(new Error('开始日期必须小于结束日期'))
                        }else if(singTime >= endTime) {
                            callback(new Error('结束日期必须大于签订日期'))
                        }else{
                            callback()
                        }
                    }, trigger: ['change', 'blur'] }
                ],
                baseCurRate: [
                    { required: true, message: '请填写本位币', trigger: 'blur' },
                    { validator: baseCurRate, trigger: ['change', 'blur'] }
                ]

            },
            leaseTypeList: [
                { value: 0, label: '外租' },
                { value: 2, label: '临租' },
            ],
            showBaseCurName: true,
        }
    },
    created () {
    },
    mounted () {
        this.getBaseInfo()
    },
    components: {
        SelectAddr
    },
    computed: {
        ...mapState({
            options: state => state.contract.ctClassify,
            userInfo: state => state.userInfo,
            currencyForm: state => state.equip.equipData.currencyForm, //币种
            financialSharingList: state => state.contract.ctClassify.financialSharingList, //传输财务共享
        })
    },
    watch: {
    },
    methods: {
        ...mapMutations(['setSelectedInfo']),
        handleCurrency (val) {
            handleCurrency(val, this)
        },
        //默认获取基础信息
        getBaseInfo () {
            equipmentWasteApply.getInfo(this.billid).then(res=>{
                const address = this.formData.address
                for(let key in res) {
                    this.formData[key] = res[key]
                }
                this.formData.address = address
                this.formData.originalBillId = this.formData.billId
                this.formData.billId = ''
                this.handleCurrency(this.formData.currencyId)
                this.formData.signingDate = formatDate(new Date(), 'yyyy-MM-dd')
            })
        },
        //基本信息保存
        addSave () {
            this.$refs.rulesBase.validate(valid => {
                if (valid) {
                    showLoading()
                    equipmentWasteSigning.createInfo(this.formData).then(res=>{
                        hideLoading()
                        this.clientPop('info', '保存成功，是否继续？', ()=>{
                            this.$router.replace({
                                path: '/wasteEquipmentSigningEdit',
                                query: {
                                    billid: res,
                                    name: 'mainInfo'
                                }
                            })
                        }, null, this.handleClose)
                    }).catch(()=>{
                        hideLoading()
                    })
                } else {
                    return false
                }
            })
        },
        //取消
        handleClose () {
            hideLoading()
            this.$router.replace('/wasteEquipmentContract')
        },
        //获取签约人
        getSigningName () {
            selectDataClient({
                SelectServiceToken: '/hr/user/getUserUnderOrgPage', // 客户端对应方法名
                IsSingleMode: true, // 是否单选 true 单选 false 多选
                SelectedIDs: [], // 已选中id
                InitParamsStr: '', //初始化参数
                Title: '选择人员' // 标题
            }).then(val => {
                this.formData.signingId = val[0].userId
                this.formData.signingName = val[0].userName
            })

        },
    },
}

</script>

<style lang='scss' scoped>
.buttons {
    left: 0;
}
.e-form {
    padding: 0 20px;
    .tabs-title::before {
        content: '';
        height: 22px;
        width: 8px;
        border-radius: 40px;
        background-color: #2e61d7;
        display: block;
        position: absolute;
        left: 20px;
        margin-right: 20px;
    }
}
.e-table{
    min-height: auto;
    background: #fff;
}
.separ{
    display: inline-block;
    font-weight: bold;
    width: 4%;
    margin: 0 1% 0 1%;
    text-align: center;
}
::v-deep.el-input--suffix .el-input__inner {
    padding-right: 5px;
}

</style>